<template>
  <div class="mt-p-season">  
    <x-header class="mt-p-season-header vux-normal-header">
      <!-- <router-link to="/trade/supplies/post/info" slot="right">保存</router-link> -->
    </x-header> 
    <dl class="mt-p-seasons" v-for="(months, year, yearIndex) in dates" :key="year">
      <dt>
        {{year}}
      </dt>
      <dd>
        <dl class="mt-p-season-month" v-for="(month, monthIndex) in months" :key="month">
          <dt>{{month}}月</dt>
          <dd v-if="yearIndex === 0 && monthIndex === 0">
            <flexbox>
              <flexbox-item 
              v-for="(d, key) in disability" 
              :key="key"
              @click="selectSeason(year, month, key)">
                <x-button 
                :class="{active: sale_pre['year'] === year && sale_pre['month'] === month && sale_pre['day'] === key}"
                type="default" mini :disabled="d"
                @click.native="selectSeason(year, month, key)" >{{normalSeason[key]}}</x-button>
              </flexbox-item>
            </flexbox>
          </dd>
          <dd  v-else>
            <flexbox>
              <flexbox-item  v-for="(season, key) in normalSeason"
              :key="key">
                <x-button 
                :class="{active: sale_pre['year'] === year && sale_pre['month'] === month && sale_pre['day'] === season}"
                type="default" mini
                @click.native="selectSeason(year, month, season)" >{{season}}</x-button>
              </flexbox-item>
            </flexbox>
          </dd>
        </dl>
      </dd>
    </dl>
  </div>
</template>

<script>
import { XHeader, Flexbox, FlexboxItem, XButton } from "vux"
import { forEach, loop } from "@/modules/util"

export default {
  data() {
    return {
      dates: [],
      disability: [],
      normalSeason: ["上旬", "中旬", "下旬"],
      active: 1
    }
  },
  mounted() {
    this.getDate()
  },
  methods: {
    getDate() {
      this.disability = getFirstMonthDisability()
      this.dates = getDate()
    },
    selectSeason(year, month, day) {
      this.$store.commit("setSalePre", {year,month,day})
      history.go(-1)
    }
  },
  computed:{
    sale_pre() {
      return this.$store.state.posts.supply.sale_pre
    }
  },
  components: {
    XHeader,
    Flexbox,
    FlexboxItem,
    XButton
  }
}

/**
 * 获取第一个月按钮的不可点击性
 */
function getFirstMonthDisability(type = 0) {
  const disability = [true, false, false]

  const day = new Date().getDate()
  if (day > 10) {
    disability[1] = true
  }
  if (day > 20) {
    disability[2] = true
  }
  return disability
}

/**
 * 得到日期相关数据
 */

function getDate() {
  let years = {}
  const date = new Date()
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()

  years[year] = []
  if (month !== 1) {
    years[year + 1] = []
  }

  //月份的累计
  let monthAccum = month + 11

  let accumulator = 0

  forEach(years, (y, key, obj) => {
    let len

    if (!accumulator) {
      len = 12 - monthAccum % 12
      obj[key] = getMonth(0, len)
    } else {
      if (monthAccum > 11) {
        obj[key] = getMonth(2, 12)
      } else {
        len = monthAccum % 12
        obj[key] = getMonth(1, len)
      }
    }
    monthAccum -= 12
    ++accumulator
  })
  return years
}

/**
 * 获取月份
 *
 * @param {Number} type 0头月 1尾月 2全月
 * @param {Number} length 年份长度
 * @returns {Object}
 */
function getMonth(type, length) {
  const month = []
  switch (type) {
    case 0:
      loop(i => {
        month.unshift(12 - i)
      }, length)
      break
    default:
      loop(i => {
        month.push(i + 1)
      }, length)
      break
  }
  return month
}
</script>

<style lang="scss">
@import "../../../../styles/index.scss";

.mt-p-season {
  .mt-p-seasons {
    & > dt {
      line-height: 40px;
      height: 40px;
      padding-left: 10px;
    }
    font-size: 18px;

    .mt-p-season-month {
      display: flex;
      flex-direction: row;
      line-height: 50px;
      height: 50px;

      .weui-btn {
        &.active {
          color: $accent-color;
          background: #fff;
        }
      }

      &:nth-child(2n-1) {
        background: #f2f2f2;
      }

      & > dt {
        flex: 1;
        padding-left: 10px;
      }
      & > dd {
        flex: 3;
        ul {
          display: flex;
          flex-direction: row;
          li {
            flex: 1;
          }
        }
      }
    }
  }
}
</style>
